<template>
  <!--  本地通话记录top50-->
  <Table border max-height="400px" :header-style="{backgroundColor:'#fffbed'}" :table-data="tableData"
         :table-column="tableColumn" :page="false">
    <template slot="phone" slot-scope="{row}">
      <el-popover
          placement="right"
          width="120px"
          trigger="click">
        <SelectCallPhone :phone="row.phone" :modeType="modeType" modeKey="local50"
                         :orderId="routesQuery.orderId"/>
        <el-link slot="reference" :underline="false" type="primary">{{
            row.phone
          }}
        </el-link>
      </el-popover>
    </template>
    <template slot="callTime" slot-scope="{row}">
      <span>
             {{ row.callDurationTotal }}s
      </span>
    </template>
  </Table>
</template>

<script>
import {callLogTop50} from '@/api/order'
export default {
  props: ['routesQuery'],
  data() {
    return {
      tableColumn: [
        {label: this.$t('联系人'), align: 'center', prop: 'name'},
        {label: this.$t('手机号码'), align: 'center', prop: 'phone',slot:'phone',minWidth:100},
        {label: this.$t('最后通话时间'), align: 'center', prop: 'maxCallTime', width: 150},
        {label: this.$t('通话次数'), align: 'center', prop: 'count'},
        {label: this.$t('总通话时长'), align: 'center', prop: 'callDurationTotal', width: 100, slot: 'callTime'},
        {label: this.$t('是否黑名单'), align: 'center', prop: 'isBlacklist', isHtml: true},
        {label: this.$t('是否灰名单'), align: 'center', prop: 'isGreyList', isHtml: true},
      ],
      tableData: []
    }
  },
  computed: {
    modeType() {
      return this.routesQuery.modeType || null
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    async getTableData() {
      const {userId,orderId} = this.routesQuery
      const res = await callLogTop50({
        userId,
        loanRecordId:orderId,
        pageNum: 1,
        pageSize: 1000
      })
      if (res.code === 1) {
        this.tableData = res.data.map(item => {
          item.isBlacklist = item.isBlacklist === 1 ? `<span style="color: red">${this.$t('命中')}</span>` : this.$t('未命中')
          item.isGreyList = item.isGreyList === 1 ? `<span style="color: red">${this.$t('命中')}</span>` : this.$t('未命中')
          return item
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
